<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="/dist/output.css" rel="stylesheet">
  <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet">


  <link href="css/icon.css" rel="stylesheet">
  <link href="css/reset.css" rel="stylesheet">

  <title>饿了么 商家信息</title>
</head>
<body>
  <div class="w-full h-full">
    <!-- header部分-->
    <header class="w-full h-12 bg-[#0097FF] text-[#fff] text-xl fixed left-0 top-0 z-[1000] flex justify-center items-center">
      <p>商家信息</p>
    </header>
    <!--        商家logo部分-->
    <div class="w-full h-35 mt-12 flex justify-center items-center">
      <img src="assets/img/sj01.png" class="w-40 h-28 rounded-[5px] mt-2">
    </div>
    <!--        商家信息部分-->
    <div class="business-info w-full h-20 flex flex-col justify-center items-center">
      <h1 class="text-xl">万家饺子（软件园E18店）</h1>
      <p class="text-xs text-[#666] mt-1">&#165;15起送 &#165;3配送</p>
      <p class="text-xs text-[#666] mt-1">各种饺子炒菜</p>
    </div>
    <!--        食品列表部分-->
    <ul class="w-full pb-14">
      <li class="w-full box-border p-2.5 select-none flex justify-between items-center">
        <div class="flex items-center">
          <img src="assets/img/sp01.png" class="w-20">
          <div class="ml-3">
            <h3 class="text-sm text-[#555]">纯肉鲜肉（水饺）</h3>
            <p class="text-xs text-[#888] mt-2">新鲜猪肉</p>
            <p class="text-xs text-[#888] mt-2">&#165;15</p>
          </div>
        </div>
        <div class="w-16 flex justify-between items-center">
          <div>
            <i class="fa fa-minus-circle text-base text-[#999] cursor-pointer"></i>
          </div>
          <p class="text-sm text-[#333]"><span>2</span></p>
          <div>
            <i class="fa fa-plus-circle text-base text-[#0097EF] cursor-pointer"></i>
          </div>
        </div>

      </li>
      <li class="w-full box-border p-2.5 select-none flex justify-between items-center">
        <div class="flex items-center">
          <img src="assets/img/sp02.png" class="w-20">
          <div class="ml-3">
            <h3 class="text-sm text-[#555]">玉米鲜肉（水饺）</h3>
            <p class="text-xs text-[#888] mt-2">玉米猪肉</p>
            <p class="text-xs text-[#888] mt-2">&#165;15</p>
          </div>
        </div>
        <div class="w-16 flex justify-between items-center">
          <div>
            <i class="fa fa-minus-circle text-base text-[#999] cursor-pointer"></i>
          </div>
          <p class="text-sm text-[#333]"><span>1</span></p>
          <div>
            <i class="fa fa-plus-circle text-base text-[#0097EF] cursor-pointer"></i>
          </div>
        </div>

      </li>
      <li class="w-full box-border p-2.5 select-none flex justify-between items-center">
        <div class="flex items-center">
          <img src="assets/img/sp03.png" class="w-20">
          <div class="ml-[3vw]">
            <h3 class="text-sm text-[#555]">虾仁三鲜（水饺）</h3>
            <p class="text-xs text-[#888] mt-2">虾仁三鲜</p>
            <p class="text-xs text-[#888] mt-2">&#165;20</p>
          </div>
        </div>
        <div class="w-16 flex justify-between items-center">
          <div>
<!--            <i class="fa fa-minus-circle text-[5.5vw] text-[#999] cursor-pointer"></i>-->
          </div>
          <p ><span></span></p>
          <div>
            <i class="fa fa-plus-circle text-base text-[#0097EF] cursor-pointer"></i>
          </div>
        </div>

      </li>
      <li class="w-full box-border p-2.5 select-none flex justify-between items-center">
        <div class="flex items-center">
          <img src="assets/img/sp04.png" class="w-20">
          <div class="ml-3">
            <h3 class="text-sm text-[#555]">素三鲜（蒸饺）</h3>
            <p class="text-xs text-[#888] mt-2">素三鲜</p>
            <p class="text-xs text-[#888] mt-2">&#165;15</p>
          </div>
        </div>
        <div class="w-16 flex justify-between items-center">
          <div>
            <!--            <i class="fa fa-minus-circle text-[5.5vw] text-[#999] cursor-pointer"></i>-->
          </div>
          <p ><span></span></p>
          <div>
            <i class="fa fa-plus-circle text-base text-[#0097EF] cursor-pointer"></i>
          </div>
        </div>

      </li>
      <li class="w-full box-border p-2.5 select-none flex justify-between items-center">
        <div class="flex items-center">
          <img src="assets/img/sp05.png" class="w-20">
          <div class="ml-3">
            <h3 class="text-sm text-[#555]">角瓜鸡蛋（蒸饺）</h3>
            <p class="text-xs text-[#888] mt-2">角瓜鸡蛋</p>
            <p class="text-xs text-[#888] mt-2">&#165;15</p>
          </div>
        </div>
        <div class="w-16 flex justify-between items-center">
          <div>
            <!--            <i class="fa fa-minus-circle text-[5.5vw] text-[#999] cursor-pointer"></i>-->
          </div>
          <p ><span></span></p>
          <div>
            <i class="fa fa-plus-circle text-base text-[#0097EF] cursor-pointer"></i>
          </div>
        </div>

      </li>
      <li class="w-full box-border p-2.5 select-none flex justify-between items-center">
        <div class="flex items-center">
          <img src="assets/img/sp06.png" class="w-20">
          <div class="ml-3">
            <h3 class="text-sm text-[#555]">小白菜肉（水饺）</h3>
            <p class="text-xs text-[#888] mt-2">小白菜肉</p>
            <p class="text-xs text-[#888] mt-2">&#165;15</p>
          </div>
        </div>
        <div class="w-16 flex justify-between items-center">
          <div>
            <!--            <i class="fa fa-minus-circle text-[5.5vw] text-[#999] cursor-pointer"></i>-->
          </div>
          <p ><span></span></p>
          <div>
            <i class="fa fa-plus-circle text-base text-[#0097EF] cursor-pointer"></i>
          </div>
        </div>

      </li>
      <li class="w-full box-border p-2.5 select-none flex justify-between items-center">
        <div class="flex items-center">
          <img src="assets/img/sp07.png" class="w-20">
          <div class="ml-3">
            <h3 class="text-sm text-[#555]">芹菜牛肉（水饺）</h3>
            <p class="text-xs text-[#888] mt-2">芹菜牛肉</p>
            <p class="text-xs text-[#888] mt-2">&#165;15</p>
          </div>
        </div>
        <div class="w-16 flex justify-between items-center">
          <div>
            <!--            <i class="fa fa-minus-circle text-[5.5vw] text-[#999] cursor-pointer"></i>-->
          </div>
          <p ><span></span></p>
          <div>
            <i class="fa fa-plus-circle text-base text-[#0097EF] cursor-pointer"></i>
          </div>
        </div>

      </li>
      <li class="w-full box-border p-2.5 select-none flex justify-between items-center">
        <div class="flex items-center">
          <img src="assets/img/sp08.png" class="w-20">
          <div class="ml-3">
            <h3 class="text-sm text-[#555]">虾腰鲜肉（水饺）</h3>
            <p class="text-xs text-[#888] mt-2">虾腰鲜肉</p>
            <p class="text-xs text-[#888] mt-2">&#165;15</p>
          </div>
        </div>
        <div class="w-16 flex justify-between items-center">
          <div>
            <!--            <i class="fa fa-minus-circle text-[5.5vw] text-[#999] cursor-pointer"></i>-->
          </div>
          <p ><span></span></p>
          <div>
            <i class="fa fa-plus-circle text-base text-[#0097EF] cursor-pointer"></i>
          </div>
        </div>

      </li>

      <li class="w-full box-border p-2.5 select-none flex justify-between items-center">
        <div class="flex items-center">
          <img src="assets/img/sp09.png" class="w-20">
          <div class="ml-3">
            <h3 class="text-sm text-[#555]">青椒鲜肉（蒸饺）</h3>
            <p class="text-xs text-[#888] mt-2">青椒鲜肉</p>
            <p class="text-xs text-[#888] mt-2">&#165;15</p>
          </div>
        </div>
        <div class="w-16 flex justify-between items-center">
          <div>
            <!--            <i class="fa fa-minus-circle text-[5.5vw] text-[#999] cursor-pointer"></i>-->
          </div>
          <p ><span></span></p>
          <div>
            <i class="fa fa-plus-circle text-base text-[#0097EF] cursor-pointer"></i>
          </div>
        </div>

      </li>
    </ul>

    <!--        购物车部分-->
    <div class=" w-full h-14 fixed left-0 bottom-0 flex">
      <div class=" flex-[2] bg-[#505051] flex">
        <div class="w-14 h-14 box-border border-solid border-4 border-[#444] rounded-[8vw] bg-[#3190E8] text-2xl text-white flex justify-center items-center -mt-4 ml-3 relative">
          <i class="fa fa-shopping-cart "></i>
          <div class="w-5 h-5 rounded-xl bg-red-600 text-white text-sm flex justify-center items-center absolute -right-1.5 -top-1.5">3</div>
        </div>
        <div class="cart-left-info">
          <p class="text-base text-white mt-1">&#165;12.88</p>
          <p class="text-sm text-[#AAA]">另需配送费3元</p>
        </div>
      </div>
      <div class="flex flex-[1]">
        <!--                两种情况 同一时间只能显示一个-->
        <!--                不够起送费-->
        <!--                <div class="bg-[#535356] w-full h-full text-white text-base text-[700] select-none flex jusitify-center items-center">&#165;15起送</div>-->
        <!--                够起送费-->
        <div class="bg-[#38CA73] w-full h-full text-white text-base text-[700] select-none cursor-pointer flex justify-center items-center" onclick="location.href='order.html'">去结算</div>
      </div>
    </div>

  </div>
</body>
</html>